<template>
  <view class="course-wrap" :data-theme="globPrimary">
    <u-navbar :border-bottom="false">
      <view class="slot-wrap u-flex">
        <view class="search-wrap"
          ><u-search
            v-model="keyword"
            :show-action="false"
            height="72"
            placeholder="搜索课程和关键字"
            @search="search"
          ></u-search
        ></view>
      </view>
    </u-navbar>
    <course-dropdown
      :list="categoryList"
      @change="handleChange"
      :sort-type="dropdownSortType"
      :screen-type="dropdownScreenType"
    ></course-dropdown>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="refresh"
      @up="getList"
    >
      <view class="course-list u-rela">
        <!-- 一排一列 -->
        <view class="collist" v-if="globCourseTypeset == 1">
          <course-col
            v-for="(item, index) in courseList"
            :key="index"
            :data="item"
            @path="handleCoursePath(item.id)"
          ></course-col>
        </view>
        <!-- 一排两列 -->
        <u-row class="rowlist" gutter="18" v-else-if="globCourseTypeset == 2">
          <u-col span="6" v-for="(item, index) in courseList" :key="index"
            ><course-row :data="item" @path="handleCoursePath(item.id)"></course-row
          ></u-col>
        </u-row>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import courseRow from '@/components/common/courseRow.vue'
import courseCol from '@/components/common/courseCol.vue'
import courseDropdown from '@/components/courseDropdown.vue'
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  components: {
    courseRow,
    courseCol,
    courseDropdown,
  },
  data() {
    return {
      keyword: '',
      dropdownSortType: '', // 排序
      dropdownScreenType: '', // 筛选
      courseList: [],
      params: {},
      categoryList: [],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globCourseTypeset: 'projectSetting/getGlobCourseTypeset',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight - 41
      return `${height}px`
    },
  },
  onLoad(options) {
    this.getCategoryList()
    // 搜索课程的关键字
    if (!this.$u.test.empty(options.title)) {
      this.params = {
        ...this.params,
        title: options.title,
      }
      this.keyword = options.title
    }
    // 排序
    if (!this.$u.test.empty(options.order)) {
      this.dropdownSortType = options.order
      this.params = {
        ...this.params,
        order: options.order,
      }
    }
    // 筛选
    if (!this.$u.test.empty(options.param)) {
      this.dropdownScreenType = options.param
      this.params = {
        ...this.params,
        param: options.param,
      }
    }
    // 分类
    if (!this.$u.test.empty(options.category)) {
      this.params = {
        ...this.params,
        category: options.category,
      }
    }
    // 类型
    if (!this.$u.test.empty(options.type)) {
      this.params = {
        ...this.params,
        course_type: options.type,
      }
    }
  },
  options: { styleIsolation: 'shared' },
  methods: {
    getList(page) {
      this.$edu.api
        .getCourseList({
          ...this.params,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          let list = data.data

          if (page.num == 1) this.courseList = []
          this.courseList = this.courseList.concat(list)
          this.mescroll.endSuccess(list.length)
        })
    },
    // 下拉刷新
    refresh() {
      this.mescroll && this.mescroll.resetUpScroll()
    },
    // 分类
    getCategoryList() {
      this.$edu.api.getCategory().then((res) => {
        const { data } = res
        this.categoryList = data
      })
    },
    // 筛选初始化分页数据
    handleChange(e) {
      this.params = {
        ...e,
        title: this.keyword,
      }
      this.mescroll.resetUpScroll(false)
      this.mescroll.scrollTo(0, 0)
    },
    // 课程跳转
    handleCoursePath(id) {
      this.$u.route('pageCourse/course/details', {
        id: id,
      })
    },
    // 搜索
    search(val) {
      this.handleChange(this.params)
    },
  },
}
</script>

<style lang="scss" scoped>
.slot-wrap {
  flex: 1;
  padding-right: 30rpx;
  .search-wrap {
    flex: 1;
  }
}

.course-wrap {
  background-color: #fff;
  .course-list {
    padding: 0 30rpx 30rpx;
  }
}
</style>
